<template>
  <div class="demo_sty">
    <el-scrollbar style="height: 100%" >
      <el-row>
        <el-col :span="4">
          <div class="return">
            <span><i class="el-icon-back"></i>   返回</span>
          </div>
        </el-col>


      </el-row>
      <div class="separator_sty"></div>
      <div class="form_sty">
        <el-form label-width="80px" :model="orderInfo">
          <el-row>
            <el-col :span="8">
              <el-form-item  label="主题" prop="name" >
                <el-input :readonly="true" v-model="orderInfo.orderTheme" placeholder="优品创意公司第一次合作"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="对应客户" prop="amount">
                <el-input :readonly="true"   v-model="orderInfo.customerByCustomId.cusName" placeholder="优品创意公司"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="对应 机会" prop="region">
                <el-input :readonly="true" v-model="orderInfo.contractByContractId.businessInfoByBusinesId.businessName" placeholder="机会列表" style="width:217px">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="8">
              <el-form-item label="订单编号" prop="contract">
                <el-input :readonly="true" v-model="orderInfo.orderName" placeholder="2002201533"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="日期" prop="date1">
                <el-date-picker :readonly="true" type="date" placeholder="选择日期" v-model="orderInfo.orderTime" style="width: 217px;"></el-date-picker>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="最晚发货" prop="date1">
                <el-date-picker :readonly="true" type="date" placeholder="选择日期"  v-model="orderInfo.deliveryTime" style="width: 217px;"></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="签约人" prop="contractor">
                <el-input  :readonly="true" v-model="orderInfo.customerName" placeholder="王志杰"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="所有者" prop="ownernaem">
                <el-input :readonly="true" v-model="orderInfo.empId.empName" placeholder="陈默"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="出库途径" prop="tujing">
                <el-input  :readonly="true" v-model="orderInfo.outboundType"  placeholder="出库途径" style="width:217px">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="总金额" prop="total">
                <el-input :readonly="true"  v-model="orderInfo.orderTotal" type="number" placeholder="12000,000"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="回款金额" prop="receivable_total">
                <el-input :readonly="true"  v-model="orderInfo.receivableOrder" type="number" placeholder="5000,000"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="付款方式" prop="payment">
                <el-input :readonly="true" v-model="orderInfo.contractByContractId.termsPayment.termsName" placeholder="付款方式" style="width:217px">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="状态" prop="resource">
            <el-radio-group :readonly="true" v-model="orderInfo.orderState">
              <el-radio :label="1">执行中</el-radio>
              <el-radio :label="0">结束</el-radio>
              <el-radio :label="2">意外终止</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="备注 " prop="desc">
            <el-input  :readonly="true" type="textarea" v-model="orderInfo.orderNoteinfo"></el-input>
          </el-form-item>
        </el-form>

        <div class="separator_sty"></div>
        <!--产品区域--->
        <div style="border: 2px solid #E9EEF3;padding:0 0 10px 0">
          <el-collapse v-model="activeNames" @change="handleChange">
            <el-collapse-item title="订单详情" name="2">
              <div style="width: 10%;height: 40px ;float: right;">
                <!-- <el-button type="primary" @click="addProduct">编辑明细</el-button>
                  <el-button type="primary" @click="sqproduct">导入售前报价单</el-button>-->
                <el-button type="warning" @click="tzhuanjm">退/换货</el-button>
              </div>
              <div style="width:95%;height:350px;margin:0 auto;overflow-y: auto">

                <el-table
                  ref="multipleTable"
                  :data="productList"
                  tooltip-effect="dark"
                  style="width: 100%"
                  @selection-change="handleSelectionChange">
                  <el-table-column
                    prop="prName"
                    label="产品名称"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="speColor"
                    label="颜色"
                    width="180px">
                  </el-table-column>
                  <el-table-column
                    prop="prsPrice"
                    label="价格">
                  </el-table-column>
                  <el-table-column
                    prop="detDiscount"
                    label="折扣">
                  </el-table-column>
                  <el-table-column
                    prop="detNum"
                    label="数量">
                  </el-table-column>
                  <el-table-column
                    prop="prUnit"
                    label="计算量">
                  </el-table-column>
                  <el-table-column
                    prop="detTotal"
                    label="总和">
                  </el-table-column>
                </el-table>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>


      <el-drawer
        title="我是标题"
        :visible.sync="drawer"
        :direction="direction"
        :with-header="false"
        size="50%">

        <el-row>
          <el-col :span="24">
            <div class="grid-content bg-purple">
              <el-row>
                <el-col :span="24">
                  <div style="border: 1px solid red ; width: 100%;height: 100px; background-color: #20a0ff"></div>
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>
      </el-drawer>
      <!--统计--->
      <div style="border: 1px solid #FFFFFF;width: 95%;height: 200px; margin:0 auto">
        <div style="border: 1px solid #FFFFFF;width: 49%;float: left">
          <div class="contract_sty">
            <span><i class="el-icon-date" @click="add"></i>交付计划</span>
            <div class="contracts_sty">
              <el-row v-for="(items,index) in deliveryinfoList " class="row_sty">
                <ul>
                  <li @click="jiaofuEvent(items.deliveryId)">
                    <el-col :span="1">
                      <div style="border: 1px solid #ffffff;width: 13px;height: 13px;background-color:#20a0ff;margin: 4px 10px 0 9px;border-radius:4px"></div>
                    </el-col>
                    <el-col :span="18">
                      {{items.deThere}}
                      <span v-if="items.deState==0">
                   <i class="el-icon-right"></i>
                 </span>
                      <span v-if="items.deState==1">
                   <i class="el-icon-check"></i>
                 </span>
                    </el-col>
                    <el-col :span="5">
                      <p style="margin: 2px 1px 1px 1px">{{items.deData}}</p>
                    </el-col>
                  </li>
                </ul>
              </el-row>
            </div>
          </div>

          <div class="contract_sty">
            <span><i class="el-icon-tickets"></i>交付记录</span>
            <div class="contracts_sty">
              <el-row v-for="(items,index) in deliveryOkList " class="row_sty">
                <ul>
                  <li @click="jiaofuEvent(items.deliveryId)">
                    <el-col :span="1">
                      <div style="border: 1px solid #ffffff;width: 13px;height: 13px;background-color:#20a0ff;margin: 4px 10px 0 9px;border-radius:4px"></div>
                    </el-col>
                    <el-col :span="18">
                      {{items.deThere}}
                      <span v-if="items.deState==0">
                   <i class="el-icon-right"></i>
                 </span>
                      <span v-if="items.deState==1">
                   <i class="el-icon-check"></i>
                 </span>
                    </el-col>
                    <el-col :span="5">
                      <p style="margin: 2px 1px 1px 1px">{{items.deData}}</p>
                    </el-col>
                  </li>
                </ul>
              </el-row>
            </div>
          </div>
        </div>

        <div style="border: 1px solid #FFFFFF;width: 49%;float: right">
          <div class="contract_sty" v-if="this.orderInfoSate==0">
            <span><i class="el-icon-date" @click="hk"></i>回款计划</span>
            <div class="contracts_sty">
              <el-row v-for="(items,index) in ctschemesList" class="row_sty">
                <ul>
                  <li @click="huikEvent(items.ctId)">
                    <el-col :span="1">
                      <div style="border: 1px solid #ffffff;width: 13px;height: 13px;background-color:#20a0ff;margin: 4px 10px 0 9px;border-radius:4px"></div>
                    </el-col>
                    <el-col :span="18">
                      ￥ {{items.ctAmount}}
                      <span v-if="items.ctState==0">
                   <i class="el-icon-right"></i>
                 </span>
                      <span v-if="items.ctState!=0">
                   <i class="el-icon-check"></i>
                 </span>
                    </el-col>
                    <el-col :span="5">
                      <p style="margin: 2px 1px 1px 1px">{{items.ctData}}</p>
                    </el-col>
                  </li>
                </ul>
              </el-row>
            </div>
          </div>

         <!-- <div class="contract_sty">
            <span><i class="el-icon-tickets"></i>回款记录</span>

          </div>-->

          <div class="contract_sty">
            <span @click="kp"><i class="el-icon-tickets"></i>开票记录</span>
            <div class="contracts_sty">
              <el-row v-for="(items,index) in orderinvoiceList" class="row_sty">
                <ul>
                  <li @click="invoiceEvent(items.oderinId)">
                    <el-col :span="1">
                      <div style="border: 1px solid #ffffff;width: 13px;height: 13px;background-color:#20a0ff;margin: 4px 10px 0 9px;border-radius:4px"></div>
                    </el-col>
                    <el-col :span="18">
                      ￥ 开票记录 {{items.invAmount}}
                      <!--<span v-if="items.ctState==0">
                   <i class="el-icon-right"></i>
                 </span>
                      <span v-if="items.ctState!=0">
                   <i class="el-icon-check"></i>
                 </span>-->
                    </el-col>
                    <el-col :span="5">
                      <p style="margin: 2px 1px 1px 1px">{{items.oderidData}}</p>
                    </el-col>
                  </li>
                </ul>
              </el-row>
            </div>
          </div>
        </div>
      </div>

      <div class="addForm_sty">
        <el-dialog title="交付计划"  width="70%"  :visible.sync="zhao" :close-on-click-modal="false">
          <div class="delivery_sty"></div>
          <el-form :model="deliveryProductDemo" label-width="80px">
            <el-row>
              <el-col :span="24">
                <el-form-item label="客户:" prop="customer">
                  <el-input v-model="cusName" style="width: 100%"/>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="24">
                <el-form-item label="合同:" prop="contract">
                  <el-input v-model="contractName" style="width: 100%"></el-input>
                </el-form-item>
              </el-col>
            </el-row>


            <el-row>
              <el-col :span="12">
                <el-form-item label="计划时间:" prop="deliveryTime">
                  <el-date-picker v-model="deliveryProductDemo.deData" :pickerOptions="pickerOptions" style="width: 95%"></el-date-picker>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="期次:" prop="PeriodNumber">
                  <el-input v-model="deliveryProductDemo.deperiod" style="width: 100%"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="所有者:" prop="salesmanNmae">
                  <el-input v-model="ctName" style="width: 100%"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="24">
                <el-form-item label="备注"prop="noteInfo">
                  <el-input type="textarea" v-model="deliveryProductDemo.deNote"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-table
                ref="multipleTable"
                :data="deliveryProductDemo.invoiceDetailsVos"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange">
                <el-table-column
                  prop="productName"
                  label="产品名称"
                  width="100">
                </el-table-column>
                <el-table-column
                  prop="prModel"
                  label="型号">
                </el-table-column>
                <el-table-column
                  prop="detaPrice"
                  label="价格">
                </el-table-column>
                <el-table-column
                  prop="detDiscount"
                  label="折扣">
                </el-table-column>
                <el-table-column
                  label="数量"
                  align="center"
                  prop="detaNumber"
                  width="150" v-if="deliveryState" key="Math.random()">
                  <!--<template slot-scope="s">
                    <el-input v-model="s.row.detaNumber"  :min="1" :max="10" size="small" @change="samTotal(s.$index,s.row)"></el-input>
                  </template>-->
                </el-table-column>
                <el-table-column
                  prop="total"
                  label="总和">
                </el-table-column>
                <el-table-column
                  prop="prUnit"
                  label="计算量">
                </el-table-column>
              </el-table>
            </el-row>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <span v-if="deliveryProductDemo.deState==0">
                          <el-button  :disabled="destate ? false : 'disabled'"  type="danger" @click="deleteInfo(deliveryProductDemo.deState,deliveryProductDemo.deliveryId)">删除</el-button>
            <el-button :disabled="destate?false:'disabled'" type="danger" @click="outboundInfo(deliveryProductDemo.deliveryId)">确定出库</el-button>
            </span>
            <el-button @click="zhao = false">取消</el-button>
          </div>
        </el-dialog>


        <!--不动-->
        <el-dialog title="交付计划"  width="70%"  :visible.sync="addformVisable" :close-on-click-modal="false">
          <div class="delivery_sty"></div>
          <el-form :model="deliveryInfo" label-width="80px">
            <el-row>
              <el-col :span="24">
                <el-form-item label="客户:" prop="customer">
                  <el-input v-model="cusName" style="width: 100%"/>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="24">
                <el-form-item label="合同:" prop="contract">
                  <el-input v-model="contractName" style="width: 100%"></el-input>
                </el-form-item>
              </el-col>
            </el-row>


            <el-row>
              <el-col :span="12">
                <el-form-item label="计划时间:" prop="deliveryTime">
                  <el-date-picker v-model="deliveryInfo.deData"  :pickerOptions="pickerOptions" style="width: 95%"></el-date-picker>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="期次:" prop="PeriodNumber">
                  <el-select v-model="deliveryInfo.dePeriod" style="width:100%">
                    <el-option label="1" value="1"></el-option>
                    <el-option label="2" value="2"></el-option>
                    <el-option label="3" value="3"></el-option>
                    <el-option label="4" value="4"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="所有者:" prop="salesmanNmae">
                  <el-input v-model="ctName" style="width: 100%"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="24">
                <el-form-item label="备注"prop="noteInfo">
                  <el-input type="textarea" v-model="deliveryInfo.deNote"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
                 <el-table
                   ref="multipleTable"
                   :data="productList"
                   tooltip-effect="dark"
                   style="width: 100%"
                   @selection-change="handleSelectionChange">
                  <el-table-column  type="selection"   width="55" >
                  </el-table-column>
                  <el-table-column
                    prop="prName"
                    label="产品名称"
                    width="100">
                  </el-table-column>
                  <el-table-column
                    prop="speColor"
                    label="型号">
                  </el-table-column>
                  <el-table-column
                    prop="prsPrice"
                    label="价格">
                  </el-table-column>
                  <el-table-column
                    prop="detDiscount"
                    label="折扣">
                  </el-table-column>
                  <el-table-column
                    label="数量"
                    align="center"
                    width="150" v-if="deliveryState" key="Math.random()">
                    <template slot-scope="s">
                      <el-input-number v-model="s.row.numb"  :min="1" :max="s.row.numb" size="small" @change="smallPrice(s.$index,s.row)"></el-input-number>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="total"
                    label="总和">
                  </el-table-column>
                  <el-table-column
                    prop="prUnit"
                    label="计算量">
                  </el-table-column>
                </el-table>
            </el-row>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="addformVisable = false">取消</el-button>
            <el-button type="primary" @click="deliveryEvent">提交</el-button>
          </div>
        </el-dialog>


        <el-dialog title="计划回款"   :visible.sync="jhhkVisable" :close-on-click-modal="false">
          <el-form :model="receivable" ref="receivable"  :rules="receivableRelus" label-width="80px">
            <el-row>
              <el-col :span="24">
                <el-form-item label="客户:" prop="cusName">
                  <el-input :readonly="status ? false : 'readonly'"  style="width: 100%" v-model="cusName"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="合同:" prop="contractName">
                  <el-input :readonly="status ? false : 'readonly'" style="width: 100%" v-model="contractName"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="日期:" prop="ctData">
                  <el-date-picker :pickerOptions="pickerOptions" :readonly="status ? false : 'readonly'" v-model="receivable.ctData" style="width: 95%"></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="期次:" prop="ctPeriod">
                  <el-select :readonly="status ? false : 'readonly'" v-model="receivable.ctPeriod" style="width:100%">
                    <el-option label="1" value="1"></el-option>
                    <el-option label="2" value="2"></el-option>
                    <el-option label="3" value="3"></el-option>
                    <el-option label="4" value="4"></el-option>
                    <el-option label="5" value="5"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <span v-if="this.fromState==1">
              <el-row>
              <el-col :span="12">
                  <el-form-item label="付款方式" prop="payment">
                <el-select v-model="fukufs" value-key="termsId">
                  <el-option v-for="met in paymentsList" :key="met.termsId" :label="met.termsName" :value="met">

                  </el-option>
                </el-select>
              </el-form-item>
                <!-- <el-form-item label="付款方式:" prop="ctPeriod.ctPeriod">
                 <el-select v-model="fukufs" style="width:100%">
                    <el-option label="支票" >支票</el-option>
                    <el-option label="现金">现金</el-option>
                     <el-option label="邮政汇款">邮政汇款</el-option>
                     <el-option label="电汇">电汇</el-option>
                     <el-option label="网上银行">网上银行</el-option>
                    <el-option label="其他">其他</el-option>
                  </el-select>
                 </el-form-item>-->
              </el-col>

                 <el-col :span="12">
                <el-form-item label="发票" prop="receivable" >
                  <el-radio-group v-model="fp">
                    <el-radio label="1" >是</el-radio>
                    <el-radio label="0">否</el-radio>
                     <el-radio label="2">无需开发票</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            </span>
            <el-row>
              <el-col :span="12">
                <el-form-item label="是否回款" prop="receivable">
                  <el-radio-group :readonly="true" :aria-readonly="true" :disabled ="status ? false : false" v-model="receivable.ctState">
                    <el-radio  :label=1>是</el-radio>
                    <el-radio  :label=0>否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="金额:" prop="ctAmount">
                  <el-input style="width: 100%" v-model="receivable.ctAmount" ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="负责人:" prop="ctName">
                  <el-input :readonly="status ? false : 'readonly'"  style="width: 100%" v-model="ctName"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="备注:" prop="ctNote">
                  <el-input  :readonly="status ? false : 'readonly'" style="width: 100%" v-model="receivable.ctNote" ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="receivableFalse">取消</el-button>
            <span v-if="status">
              <el-button type="primary" @click="receivableok">提交</el-button>
            </span>
            <span v-if="!status">
              <span v-if="receivable.ctState==0">
                 <el-button type="primary" @click="receivableokEvent">回款记录提交</el-button>
              </span>
            </span>
          </div>
        </el-dialog>

        <el-dialog title="开票记录"  :visible.sync="kpVisable" :close-on-click-modal="false">
          <el-form :model="invoiceInfo" label-width="80px">
            <el-row>
              <el-col :span="24">
                <el-form-item label="客户:" prop="productName">
                  <el-input  style="width: 100%" v-model="cusName" ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="合同:" prop="productName">
                  <el-input  style="width: 100%" v-model="contractName"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="开票内容:" prop="productName">
                  <el-input  style="width: 100%" v-model="invoiceInfo.oderinInfo"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="票据类型:" prop="productName">
                  <el-select  v-model="invoiceInfo.oderidType"  placeholder="票据类型" style="width:217px">
                    <el-option label="普通国税" value="普通国税"></el-option>
                    <el-option label="普通地税" value="普通地税"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="票据金额:" prop="productName">
                  <el-input  style="width: 100%" v-model="invoiceInfo.invAmount"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="发票号码:" prop="productName">
                  <el-input  style="width: 100%" v-model="invoiceInfo.oderinNumber"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="开票日期:" prop="productName">
                  <el-date-picker v-model="invoiceInfo.oderidData" style="width: 95%"></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="经手人:" prop="productName">
                  <el-input  style="width: 100%" v-model="ctName"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="24">
                <el-form-item label="备注:" prop="productName">
                  <el-input  style="width: 100%" v-model="invoiceInfo.irmask"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="kpVisable = false">取 消</el-button>
            <el-button type="primary" @click="invoiceInfoOk">提交</el-button>
          </div>
        <!-- &lt;!&ndash; <div slot="footer" class="dialog-footer">
            <el-button @click="kpVisable = false">取消</el-button>
            <el-button type="primary" @click="receivableok">提交</el-button>
          </div>&ndash;&gt;-->
        </el-dialog>

      </div>
    </el-scrollbar>

  </div>
</template>

<script>

  import TemplateVue from './homepage/TemplateVue'
  export default {
    name: 'Csdemo',
    components: {TemplateVue},
    data () {
      var ctAmountValidator = (rule, value, callback) => {
        this.print("回款金额"+this.orderAmount);
        this.print("订单金额"+this.orderInfo.orderTotal);

        if(this.receivable.ctAmount>this.orderInfo.orderTotal-this.orderAmount){
          this.returnAmount=this.orderInfo.orderTotal-this.orderAmount;
          this.print("可回"+(this.returnAmount));
          callback(new Error('剩余可回款:'));
        }
      }
      return {
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() < Date.now() - 8.64e7;
          },
        },
        returnAmount:0,
        receivableRelus:{
          ctData:[
            { required: true, message: '请选择日期', trigger: 'change' },
          ],
          ctPeriod:[
            { required: true, message: '请选择期次', trigger: 'change' },
          ],
          ctAmount:[
            { required: true, trigger: 'change' },
            { validator:ctAmountValidator, message: '金额错误',trigger: 'change' }
          ],
        },
        productNumberList: [],
        destate:true,
        destateInfo:0,
        zhao:false,
        productState:true,
        deliveryProductDemo:[],
        deliveryState:true,
        deliveryProductList:[],
        multipleTable:[],
        multipleSelection:[],
        paymentsList:[],//付款列表
        drawer:false,
        direction:'rtl',
        puOrderId:'',//传过来的id
        orderInfo:{},//订单详情
        orderInfoSate:0,
        productList:[],//订单下的产品
        deliveryList:[],//交付计划下的产品
        cusName:'',//客户名称
        contractName:'',//合同名称
        ctName:'张雯',
        deliveryDetails:[],//交付计划下的产品
        receivable:{
          ctId:'',
          ctData:'',
          ctState:'',
          ctCustomerid:'',
          ctUserid:'0',
          ctNote:'',
          ctContractid:'',
          ctPeriod:'',
          invoiceState:'',
          ctAmount:'',
          orderInfoByOrderId:{
            orderId:'',
          }
        },//回款
        invoiceInfo:{
          oderinId:'',//id
          oderinNumber:'',//发票号码
          oderinOrderid:'',//合同
          invCustomerid:'',//客户id
          oderinInfo:'',//开票内容
          oderidData:'',//开票日期
          oderidType:'',//开票类型
          oderidUderid:'0',//开票人
          irmask:'',//备注
          invAmount:'',//金额
          odetailsId:'',//订单
        },//发票
        deliveryInfo:{
          deliveryId:'',//id
          deCustomerid:'',//客户id
          deContractid:'',//合同id
          deAmount:'',//总金额
          dePeriod:'',//交付期次
          deData:'',//交付日期
          deUserid:'0',//所有者
          deDemand:'',//交付条件
          deRemind:'',//是否提醒
          deNote:'',//备注
          deliverydetailsByDeliveryId:{},//交付详情
          orderInfoByOrderId:{
            orderId:'',
          },//订单信息
        },//交付计划


        /////////======///////////////
        direction: [],//产品列表
        direction: 'rtl',//左弹出
        drawer: false,//弹框
        //计划交付信息
        addForm: {
          productName: '',//产品名称
          customer: '',//客户信息
          contract: '',//合同信息
          price: '',//价格
          productNumber: '',//产品数量
          deliveryTime: '',//计划交付时间
          PeriodNumber: '',//期次
          salesmanNmae: '0',//所有者
          requirements: '',//要求
          conditions: '',//交付条件
          remind: '',//是否提醒
          noteInfo: '',//备注
        },
        addformVisable: false,//隐藏窗体
        jhhkVisable: false,//计划回款
        kpVisable: false,//开票
        activeNames: [1],


        ctschemesList:[],//回款信息
        ctschemesListOk:[],
        orderinvoiceList:[],//发票
        deliveryinfoList:[],//交付计划信息
        deliveryOkList:[],//交付计划完成信息
        fromState:0,
        status:true,
        fukufs:'',
        fp:'',
        orderAmount:0,
        userInfo:{
          employeesId:0,//员工id
          empName:''//员工名称
        },

      };
    },
    watch:{
      $route(){//跳转到该页面后需要进行的操作
        if(this.$route.query.key> 0 &&this.$route.query.key!=''){
          //查询信息
          this.puOrderId=this.$route.query.key;
          this.deliveryinfoEvent(this.$route.query.key);//交付计划
          this.initData(this.$route.query.key,this.userInfo.employeesId);//订单详情
          this.productInfo(this.$route.query.key);//订单下的产品
          this.ctschemesEvent(this.$route.query.key);//回款信息
          this.orderinvoiceEvent(this.$route.query.key);//发票
          this.payments();//付款方式
          this.limitNumberEvent(this.puOrderId);

        }
      }
    },
    mounted () {
      this.getPath();
    },
    created :function()  {
      this.userInfo=JSON.parse(sessionStorage.getItem('user'));
      this.receivable.ctUserid=this.userInfo.employeesId;
      this.invoiceInfo.oderidUderid=this.userInfo.employeesId;
      this.deliveryInfo.deUserid=this.userInfo.employeesId;
      this.addForm.salesmanNmae=this.userInfo.employeesId;
      this.receivable.ctState='0';
      this.puOrderId=this.$route.query.key;
      this.deliveryinfoEvent(this.$route.query.key);//交付计划
      this.initData(this.$route.query.key,this.userInfo.employeesId);//订单详情
      this.productInfo(this.$route.query.key);//订单下的产品
      this.ctschemesEvent(this.$route.query.key);//回款信息
      this.orderinvoiceEvent(this.$route.query.key);//发票
      this.payments();//付款方式
      this.limitNumberEvent(this.puOrderId);
    },
    methods: {
      getPath(){
        if(this.$router.path=='/demopage'){
          this.created();
        }
      },
      //确定出库
      outboundInfo(id){
        this.$axios.get("http://localhost:8088/outbound_ctschems",{params:{id:id}}).then().catch()
        this.zhao=false;
        this.deliveryinfoEvent(this.$route.query.key);//交付计划
        this.jiaofuEvent(this.puOrderId);
      },
      //删除交付计划
      deleteInfo(state,id){
          this.$axios.get("http://localhost:8088/delete_ctschems",{params:{id:id}}).then().catch()
          this.zhao=false;
        this.deliveryinfoEvent(this.$route.query.key);//交付计划
      },
      //选择产品
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      receivableFalse(){
        this.jhhkVisable = false;
        this.fukufs='';
        this.fp=0;
      },
      //付款方式
      payments(){
        this.$axios.get("http://localhost:8088/Payment_detail").then(v=>{
            this.paymentsList=v.data;
            this.termsPayment=v.data;
          }
        ).catch()
      },

      //交付下的产品可编辑
      deliveryProduct(orderId,deliveryId){
        this.$axios.get("http://localhost:8088/deliveryProduct_list",{params:{orderId:orderId,deliveryId:deliveryId}}).then(v=>{
          this.deliveryProductDemo=v.data[0];
          window.console.log("xxxx"+v.data[0]);
        }).catch()
      },
      //点击交付计划
      jiaofuEvent(id){
        this.assignment();
        this.$axios.get("http://localhost:8088/deliveryProduct_list",{params:{orderId:this.puOrderId,deliveryId:id}}).then(v=>{
          this.deliveryProductDemo=v.data[0];
          this.destateInfo=this.deliveryProductDemo.deState;
          if(this.destateInfo==0){
            this.destate=true;
          }else {
            this.destate=false;
          }
          for (let i = 0; i <this.deliveryProductDemo.invoiceDetailsVos.length ; i++) {
            this.$set(this.deliveryProductDemo.invoiceDetailsVos[i],'total',0);
            this.samTotal(i,this.deliveryProductDemo.invoiceDetailsVos[i]);
          }
          this.zhao=true;
        }).catch();

      },
      //查看交付计划》产品总金额
      samTotal(index,row){
        let price=0;//小计
        if(row.detDiscount=='0'){//不享受折扣
          //售价*数量
          price=parseFloat(row.detaPrice).toFixed(2)*row.detaNumber;
        }else{//享受折扣
          //售价*折扣*数量
          price=parseFloat(row.detaPrice).toFixed(2)*parseFloat(row.detDiscount).toFixed(2)*row.detaNumber;
        }
        this.deliveryProductDemo.invoiceDetailsVos[index].total=price;//重新给小计赋值

      },
      //交付查看
      deliverydetailsByDeliveryInfo(id){
        this.$axios.get().then().catch()
      },


      //交付计划
      deliveryinfoEvent(id){
        this.$axios.get("http://localhost:8088/delivery_plan",{params:{orderId:id}}).then(v=>{
          this.deliveryOkList=[];
          this.deliveryinfoList=[];
          this.print("vue数据"+v.data.length);
          v.data.forEach((item,index)=>{
            if(item.deState==1){
              this.print("完成数据"+item.deThere);
              //this.deliveryOkList[index]=item;
              this.deliveryOkList.push(item);
            }
            if(item.deState==0){
              this.print("未完成数据"+item.deThere);
              //this.deliveryinfoList[index]=item;
              this.deliveryinfoList.push(item);
            }

          })
        }).catch()
      },
      //发票清除
      removeValueEvent(){
        this.invoiceInfo={
          oderinId:'',//id
            oderinNumber:'',//发票号码
            oderinOrderid:'',//合同
            invCustomerid:'',//客户id
            oderinInfo:'',//开票内容
            oderidData:'',//开票日期
            oderidType:'',//开票类型
            oderidUderid:'1001',//开票人
            irmask:'',//备注
            invAmount:'',//金额
            odetailsId:'',//订单
        }
      },
      //发票详情
      invoiceEvent(id){
        this.orderinvoiceList.forEach((items,index)=>{
          if(items.oderinId=id){
            this.contractName=this.orderInfo.contractByContractId.contractName;//合同名称
            this.cusName=this.orderInfo.customerByCustomId.cusName;
            this.invoiceInfo.oderinId=items.oderinId;
            this.invoiceInfo.oderinNumber=items.oderinNumber;
            this.invoiceInfo.invCustomerid=items.invCustomerid;
            this.invoiceInfo.oderinInfo=items.oderinInfo;
            this.invoiceInfo.oderidData=items.oderidData;
            this.invoiceInfo.oderidType=items.oderidType;
            this.invoiceInfo.irmask=items.irmask;
            this.invoiceInfo.invAmount=items.invAmount;
            this.invoiceInfo.odetailsId=items.odetailsId;
            this.kpVisable=true;

          }
        })
      },
      //发票
      orderinvoiceEvent(id){
        this.$axios.get("http://localhost:8088/orderinvoice_list",{params:{id:id}}).then(v=>{
          this.orderinvoiceList=v.data;
        }).catch();
      },

      //回款
      huikEvent(id){
        this.ctschemesList.forEach((items,index)=>{
          if(items.ctId==id){
            this.fromState=1;
            this.status=false;
            this.contractName=this.orderInfo.contractByContractId.contractName;//合同名称
            this.cusName=this.orderInfo.customerByCustomId.cusName;
            this.receivable.ctId=items.ctId,
            this.receivable.ctData=items.ctData,
            this.receivable.ctCustomerid=items.ctContractid,
              this.receivable.ctNote=items.ctNote,
              this.receivable.ctContractid=items.ctContractid,
              this.receivable.ctPeriod=items.ctPeriod,
              this.receivable.invoiceState=items.invoiceState,
              this.receivable.ctAmount=items.ctAmount,
              this.receivable.ctState=items.ctState
              this.jhhkVisable = true;
          }
        });

      },
      //回款全部信息
      ctschemesEvent(id){
        this.$axios.get("http://localhost:8088/ctschemes_list",{params:{id:id}}).then(v=>{
          this.ctschemesList=v.data;
          v.data.forEach((items,index)=>{
            this.orderAmount+=items.ctAmount;
          })
        }).catch()
      },
      //将数据转换成指定数据格式
      kpl(){
        for (let i = 0; i <this.multipleSelection.length ; i++) {
          let val = this.multipleSelection[i];
          this.$set(val,'detaProductid',this.multipleSelection[i].detPrid)//此处为重点
          this.$set(val,'detaPrice',this.multipleSelection[i].prsPrice)//此处为重点
          this.$set(val,'detaNumber',this.multipleSelection[i].numb)//此处为重点
          this.deliveryDetails.push(val);

        }


      },

      //交付计划新增
      deliveryEvent(){
        this.kpl();
        this.total();
        this.$axios.post("http://localhost:8088/save_deliveryplan",{
          deliveryId:this.deliveryInfo.deliveryId,//id
          deCustomerid:this.deliveryInfo.deCustomerid,//客户id
          deContractid:this.deliveryInfo.deContractid,//合同id
          deAmount:this.deliveryInfo.deAmount,//总金额
          dePeriod:this.deliveryInfo.dePeriod,//交付期次
          deData:this.deliveryInfo.deData,//交付日期
          deUserid:this.deliveryInfo.deUserid,//所有者
          deDemand:this.deliveryInfo.deDemand,//交付条件
          deRemind:this.deliveryInfo.deRemind,//是否提醒
          deNote:this.deliveryInfo.deNote,//备注
          deliverydetailsByDeliveryId:this.deliveryDetails,//交付详情
          orderInfoByOrderId:this.orderInfo,//订单信息
        }).then(v=>{
          this.addformVisable=false;
          this.multipleSelection=[];
          this.productInfo(this.puOrderId);
          this.deliveryinfoEvent(this.puOrderId);
          this.deliveryInfo={
            deliveryId:'',//id
            deCustomerid:'',//客户id
            deContractid:'',//合同id
            deAmount:0,//总金额
            dePeriod:'',//交付期次
            deData:'',//交付日期
            deUserid:'1001',//所有者
            deDemand:'',//交付条件
            deRemind:'',//是否提醒
            deNote:'',//备注
            deliverydetailsByDeliveryId:{},//交付详情
            orderInfoByOrderId:{
              orderId:'',
            },//订单信息
          }
        }).catch();
      },

      //产品计算小计
      smallPrice(index,row){
        let price=0;//小计
        if(row.detDiscount=='0'){//不享受折扣
          //售价*数量
          price=parseFloat(row.prsPrice).toFixed(2)*row.numb;
        }else{//享受折扣
          //售价*折扣*数量
          price=parseFloat(row.prsPrice).toFixed(2)*parseFloat(row.detDiscount).toFixed(2)*row.numb;
        }
        this.productList[index].total=price;//重新给小计赋值
      },
      //总算
      total(){
        let tatalMoney=0;
        this.productList.forEach((item,i)=>{
          tatalMoney=tatalMoney+item.total;
        })
        this.deliveryInfo.deAmount=tatalMoney;
      },
      //回款计划回款
      receivableokEvent(){
        let   data = this.qs.stringify({
          contractId:this.orderInfo.contractByContractId.contractId,//合同id
          hkPlay:this.fukufs.termsId,//付款方式id
          fpstate:this.fp,//是否需要发票
          amount:this.receivable.ctAmount,//回款金额
          ctId:this.receivable.ctId,//回款计划id
          orderId:this.puOrderId,//订单id
        })
          this.$axios.post("http://localhost:8088/chang_ctschems",data).then(v=>{
            this.jhhkVisable=false;
          }).catch();
        this.ctschemesEvent(this.puOrderId);
      },
      //回款计划保存
      receivableok(){
        if(this.status){
          this.assignment();
          let data=this.qs.stringify({
            ctscheme : JSON.stringify(this.receivable)
          });
          this.$message("ctCustomerid"+this.receivable.ctCustomerid)
          this.$axios.post("http://localhost:8088/save_ctscheme",data).then(v=>{
            if(v.data=200){
              this.$message("回款计划新增成功！");
              this.jhhkVisable = false;
              this.receivable={
                ctId:'',
                ctData:'',
                ctState:'',
                ctCustomerid:'',
                ctUserid:'0',
                ctNote:'',
                ctContractid:'',
                ctPeriod:'',
                invoiceState:'',
                ctAmount:'',
                orderInfoByOrderId:{
                  orderId:'',
                }
              }
              this.ctschemesEvent(this.puOrderId);
            }else {
              this.$message("回款计划新增失败！");
            }
          }).catch()
        }else {
          data={
            contractId:this.orderInfo.contractByContractId.contractId,
            hkPlay:this.fukufs,
            fpstate:this.fp
          },
          this.$axios.post("http://localhost:8088/chang_ctschems",{params:{
              contractId:this.orderInfo.contractByContractId.contractId,
              hkPlay:this.fukufs,
              fpstate:this.fp
            }}).then(v=>{}).catch();
          this.$message("回款计划新增失败！");
          this.ctschemesEvent(this.puOrderId);
        }

      },
      //发票
      invoiceInfoOk(){
        let data=this.qs.stringify({
          invo : JSON.stringify(this.invoiceInfo)
        });
        this.$axios.post("http://localhost:8088/save_invo",data).then(v=>{
          if(v.data=200){
            this.kpVisable = false;

          }
        }).catch()
      },
      //初始化
      initData(id,userId){
        this.$axios.get("http://localhost:8088/orderdetails_info",
          {params:{orderId:id,userId:userId}}).then(v=>{
          this.orderInfo=v.data;
          this.orderInfoSate=v.data.orderAppstate;
        }).catch()
      },
      //订单下的产品
      productInfo(id){
        this.$axios.get("http://localhost:8088/details_products",
          {params:{orderId:id,exstate:'',restate:''}}).then(v=>{
          this.productList=v.data;
        }).catch()
      },
      //将获取的数据赋值
      assignment(){
        this.receivable.ctContractid=this.orderInfo.contractByContractId.contractId;//合同
        this.contractName=this.orderInfo.contractByContractId.contractName;//合同名称
        this.receivable.ctCustomerid=this.orderInfo.customerByCustomId.customId;//客户
        this.cusName=this.orderInfo.customerByCustomId.cusName;
        this.receivable.orderInfoByOrderId.orderId=this.orderInfo.orderId;//回款订单号

        this.invoiceInfo.oderinOrderid=this.orderInfo.contractByContractId.contractId;//发票_合同
        this.invoiceInfo.odetailsId=this.orderInfo.orderId;
        this.invoiceInfo.invCustomerid=this.orderInfo.customerByCustomId.customId;

        this.deliveryInfo.deContractid=this.orderInfo.contractByContractId.contractId;
        this.deliveryInfo.deCustomerid=this.orderInfo.customerByCustomId.customId;
        this.deliveryInfo.orderInfoByOrderId.orderId=this.orderInfo.orderId;
      },
      //产品选择卡片处理
      handleChange (val) {
        console.log(val);
      },
      limitNumberEvent(id){
        this.$axios.get("http://localhost:8088/limit_number",{params:{id:this.puOrderId}}).then(v=>{
          this.productNumberList=v.data;
        }).catch();
      },
      //新增交付计划唐弹框显示
      add () {
        this.limitNumberEvent(this.puOrderId);
        this.assignment();
        /*if(this.productNumberList.length==0){
          for (let i = 0; i <this.productList.length ; i++) {
                this.$set(this.productList[i],'numb',this.productList[i].detNum);
                this.smallPrice(i,this.productList[i]);
          }
        }else{*/
         /* for (let i = 0; i <this.productList.length ; i++) {
            for(let t = 0; t <this.productNumberList.length ; t++){
              if(this.productList[i].detPrid==this.productNumberList[t].detPrid){
                this.$set(this.productList[i],'numb',this.productNumberList[t].detNum);
                this.smallPrice(i,this.productList[i]);
              }
            }
          }*/
         if(this.productNumberList.length==0){
           this.addformVisable = false;
           this.$message("产品交付完成");
         }else {
           for(let t = 0; t <this.productNumberList.length ; t++){
             for (let i = 0; i <this.productList.length ; i++) {
               if (this.productList[i].detPrid == this.productNumberList[t].detPrid) {
                 this.$set(this.productList[i], 'numb', this.productNumberList[t].detNum);
                 this.smallPrice(i, this.productList[i]);
               }
             }
           }
           this.addformVisable = true;
         }

      },
      hk () {
        this.assignment();
        this.fromState=0;
        this.status=true;
        this.receivable={
          ctId:'',
          ctData:'',
          ctState:'',
          ctCustomerid:'',
          ctUserid:'1001',
          ctNote:'',
          ctContractid:'',
          ctPeriod:'',
          invoiceState:'',
          ctAmount:'',
          orderInfoByOrderId:{
            orderId:'',
          }
        };
        this.jhhkVisable = true;
      },
      kp () {
        this.removeValueEvent();
        this.assignment();
        this.kpVisable = true;
      },
      addProduct () {
        this.drawer = true;
      },
      confirmList () {
        this.drawer = false;
      },
      sqproduct(){
        this.$message.error("尚未填写报价单");
      },
      tzhuanjm(){
        this.$router.push({path:'returnorder', query: {key:this.puOrderId,orderCode:this.orderInfo.orderName,cusName:this.orderInfo.customerByCustomId.cusName,customer:this.orderInfo.customerByCustomId.customId,
        orderState:this.orderInfoSate}})
      }
    }
  }
</script>

<style scoped>
  .row_sty{
    cursor: pointer;
  }
  .row_sty.hover{
    background-color: #20a0ff;
  }
  .main_sty{
    border: 1px solid red;
    width: 100%;
  }
  .demo_sty{
    border:1px solid #ccc;
    width:100%;
    height: 545px;
    background: white;
    border-radius: 5px;
    box-shadow:#ccc 0px 0px 10px;
    overflow:hidden;
  }
  .return{
    border-right:1px solid #ccc;
    width:70px;
    color:#777;
    font-size: 13px;
    margin-left:10px;
    margin-top:10px;
    cursor: pointer;

  }
  .return:hover{
    color:#409eff;
    font-max-size: 10px;
  }
  .form_sty{
    border:1px solid #FFFFFF;
    background-color: #FFFFFF;
  }
  .form_sty>>>.el-form-item{
    margin: 10px 1px 1px ;
    padding: 10px 1px 1px 1px;
  }

  .form_sty>>>.el-form-item__label{
    text-align: left;
    padding: 0 0 0 19px;
  }

  .form_sty>>>.el-input__inner{
    border-top:none;
    border-left: none;
    border-right: none;
  }
  .el-form-item{
    padding: 20px 100px 0 10px;
  }
  .el-input{
    width: 50%;
    float: left;
    width: 217px;
  }
  .separator_sty{
    border:1px solid #409eff;
    width: 95%;
    margin: 10px auto;
  }
  .dialogmesg_sty{
    border:1px solid #409eff;
    position: absolute;
    width: 95%;
    margin:-30px 1px 1px 1px ;
  }
  .contract_sty{
    border: 1px solid #aaaaaa;
    width: 100%;
    margin: 10px 0 10px 0;
    min-height: 100px;
    max-height: 200px;
    border-radius: 5px
  }
  .contracts_sty{
    border: 1px solid #FFFFFF;
    width: 99%;
    overflow-y: auto;
    margin: 10px 0 10px 0;
    min-height: 100px;
    max-height: 165px;
    border-radius: 5px
  }
  .contract_sty span{
    padding:1px 1px 1px 10px;
    cursor:pointer;
  }
  .contract_sty ul li {
    list-style-type: none;
    padding: 1px 1px 10px 1px ;
    cursor:pointer;
  }
  .contract_sty ul li hover {
    background-position: 0 0%;
    background-color:rebeccapurple;
    transition: background .3s ease
  }

  .addForm_sty>>>.el-form-item{
    margin: 1px 1px 1px ;
    padding: 9px 1px 1px 1px;
  }
  .addForm_sty>>>.el-dialog__body{
    padding:5px 20px;
  }
</style>
